import React from 'react'
import ReactDOM from 'react-dom'

export default class Form extends React.Component {
  constructor() {
    super()
    // 1. 创建一个真实dom.用来存放当前组件的结构
    this.container = document.createElement('div')
  }
  render() {
    let node = (
      <form>
        用户名: <input type="text" name="username" /> <br />
        密码: <input type="password" name="password" /> <br />
      </form>
    )
    // 根据jsx生成真实dom,这个真实dom会添加到this.container中
    return ReactDOM.createPortal(node, this.container)
  }

  componentDidMount() {
    document.querySelector('#modal').appendChild(this.container)
  }
}
